<template>
    <div>
        <myheader></myheader>
            <br><br>
            <!-- 面包屑导航 -->
            <Breadcrumb :datas='datas'></Breadcrumb>

        <Avatar :src='this.user.src' :show='ishow' :width='150' fit='fill'></Avatar>

        <div>
            <h4>我的收藏</h4>
            <Checkbox :datas='goods' v-model='good_value'></Checkbox>
            <Button @click='delflow' color='green'>取消收藏</Button>
		</div>

        <el-form ref="userform" :model='user'
            label-position="left"
            label-width="80px">
            <el-form-item label="密码:" prop="password">
                <el-input v-model="user.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="新密码:" prop="password">
                <el-input v-model="user.apassword" show-password></el-input>
            </el-form-item>
            <el-form-item label="再次确认:" prop="password">
                <el-input v-model="bpassword" show-password></el-input>
            </el-form-item>
        <table>
            <tr>
                <td style="cursor:pointer;">头像上传: &nbsp;&nbsp;&nbsp;&nbsp;<input type="file" @change="upload"></td>
            </tr>
            <br>
            <tr>
                <td style="cursor:pointer;">七牛云上传: <input type="file" @change="upload_qiniu"></td>
            </tr>
            <br>
            <tr>
                <td>上传视频: &nbsp;&nbsp;&nbsp;
                <input type='file' @change='upload_qiniu_src'></td>
                <td><video :src='this.user.vedio' id='video'  controls autoplay width="300" v-show='vshow' muted></video><br>
                <Button color='red' @click='changepic'>{{ mybutton }}</Button>
                </td>
            </tr>
            <tr>
                <!--<td>上传进度：&nbsp;&nbsp;&nbsp;&nbsp;{{ filePercent }}</td>-->
                <p><Progress v-show="filePercent_int" :percent="filePercent_int" color="pink"><span slot="title"></span><span slot="text">{{ filePercent_int }}%</span></Progress></p>
            </tr>
        </table>
            <el-form-item prop=''>
                <dragVrify
                    :width="width"
                    :height="height"
                    :text="text"
                    ref="Verify">
                </dragVrify>
            </el-form-item>
            <el-button type="primary" @click="update">修改密码</el-button> &nbsp;&nbsp;
        </el-form>
            <br><br>
            <br><br>
            <br><br><br>
        <myfooter></myfooter>

    </div>
</template>


<script>
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';
import axios from 'axios'
import dragVerify from 'vue-drag-verify';
import {config} from '../config.js'
// 导入音频js文件
// import 'video.js/dist/video-js.css';
// import 'vue-video-player/src/custom-theme.css';
// import 'videojs-contrib-hls.js/src/videojs.hlsjs';

export default {
    data() {
        return {
            //声明面包屑变量
            datas:[{title:'首页',route:{name:'index'}},{title:'我的首页'}],
            user:{
                "username":'',
                "password":'',
                "apassword":'',
                "src":'',
                "vedio":'',
            },
            uid:'',
            ishow: 1,
            vshow: 0,
            text:'请将滑块拖动到最右侧',
            width:300,
            height:40,
            bpassword:'',
            // 七牛云上传凭证
            uptoken:'',
            filePercent: 0,
            filePercent_int:0,
            mybutton:'进入画中画',
            //商品关注列表
            goods:[],
            good_value:[],
            flowid:{},
        }
    },
    methods: {
        //批量删除收藏
        delflow(){
            // console.log(this.good_value);
            // console.log(this.flowid);
            let goods = [];
            for(let i=0,l=this.good_value.length;i<l;i++){
                // console.log(this.good_value[i])
                goods.push(this.flowid[this.good_value[i]]);

                // console.log(goods)
            }
            let glist = JSON.stringify(goods);
            axios.get(config['djurl']+'delflow/',{params:{uid:this.uid,ids:glist}}).then(res=>{
                console.log(res);
                this.$Message(res.data.message)
            })

        },

        //渲染本用户都收藏了哪些商品
		uidflow(){
			axios.get(config['djurl']+'uidflow/',{params:{uid:this.uid}}).then(res=>{
				let goods = [];
                // console.log(res.data)
				for(let i=0,l=res.data.length;i<l;i  ++){
					goods.push(res.data[i].name)
					this.goods = goods;
                    this.good_value = goods;
                    this.flowid[res.data[i].name] = res.data[i].id;
				}
			})
		},

        // 获取七牛云凭证
        get_uotoken(){
            axios.get(config['djurl']+'uptoken/').then(res=>{
                this.uptoken = res.data.token;
            })
        },
            //视频上传七牛云
        upload_qiniu_src(e){

            //获取文件对象
            let file = e.target.files[0];

            //声明参数
            let param = new FormData();

            //将上传凭证添加参数
            param.append('token',this.uptoken);

            //附加文件
            param.append('file',file);

            //定制化axios
            const axios_qiniu = this.axios.create({withCredentials:false});

            //发送请求
            axios_qiniu({

            method:'POST',
            url:'http://up-z1.qiniu.com/',
            data:param,
            timeout:60000,
            //设置上传进度
            onUploadProgress:(e)=>{
                //设置总进度对象  已上传字节数/总字节数
                var complete = (e.loaded / e.total);
                //安慰剂按钮
                if(complete < 1){
                    this.filePercent = (complete*100).toFixed(2)+"%";
                    this.filePercent_int = parseInt((complete*100).toFixed(2))
                }
            }

            }).then(res=>{
                console.log(res)
                let data = new FormData();
                data.append('uid',localStorage.getItem('uid'));
                data.append('vedio',res.data.key);
                axios({
                    url:config['djurl']+'updatevedio/',
                    method:'POST',
                    data:data,
                }).then(res=>{
                    this.$Message(res.data.message)
                })

                //复制
                this.qiniu_src = config['qiniu'] + res.data.key
                this.filePercent = '100%';
                this.filePercent_int = 100;
                this.show = 1;
            });
        },
        // 定义画中画切换
		changepic:function(){
			// 判断是否处于画中画界面
			if(video !== document.pictureInPictureElement){
				//尝试进入画中画模式
				video.requestPictureInPicture();
				this.mybutton = '退出画中画'
			}else{
				//退出画中画
				document.exitPictureInPicture();
				this.mybutton = '进入画中画'
			}
		},
        //上传文件到七牛
        upload_qiniu(e){
            //获取文件对象
            let file = e.target.files[0];
            //声明参数
            let param = new FormData();
            //将上传凭证添加参数 将文件添加进去
            param.append('token',this.uptoken);
            param.append('file',file);
            //定制化axios
            const axios_qiniu = axios.create({widthCredentials:false})
            //发送请求
            axios_qiniu({
                method:'POST',
                url:'http://up-z1.qiniu.com/',
                data:param,
                timeout:30000,
            }).then(res=>{
                console.log(res)
                this.user.src = config['qiniu'] + res.data.key;
                let params = new FormData();
                params.append('img',res.data.key);
                params.append('uid',localStorage.getItem('uid'));

                // 发送异步请求
                this.axios.post('http://127.0.0.1:8000/updateuser/',params).then(res=>{
                    console.log(res)

                })
            })
        },

        //上传头像到django
        upload(e){
        // 声明文件对象
        let file = e.target.files[0];
        // 声明form对象
        let param = new FormData();
        // 添加文件
        param.append('file',file,file.name);
        param.append('username',this.user.username);

        // 声明请求头
        let config = {headers:{'Content-Type':'multipart/form-data'}}
        // 发送异步请求
            this.axios.post('http://127.0.0.1:8000/uploadfile/',param,config).then(res=>{
                console.log(res)
            // 展示返回图片
            this.user.src = 'http://127.0.0.1:8000/static/upload/' + res.data.filename
            })
        },
        //修改密码
        update(){
            //验证滑块是否拖动
            console.log(this.$refs['Verify'].isPassing);
            if(this.$refs['Verify'].isPassing == false){
                this.$Message('请拖动滑块')
            }
            else{
                if(this.user.apassword!==this.bpassword){
                    this.$Message('新密码和确认密码有误，请重新输入!')
                }else{
                    axios({
                        url:config['djurl']+'update/',
                        method:'post',
                        data:this.user,
                    }).then(res=>{
                        if(res.data.code==200){
                            this.$Message('修改成功')
                            this.$router.push('/')
                        }else{
                            this.$Message(res.data.message)
                        }
                    })
                }

            }
        },
        //获取用信息
        get_image(){
            this.user.username = localStorage.getItem('username');
            this.uid = localStorage.getItem('uid');
            let data = new FormData();
            axios.get('http://127.0.0.1:8000/userinfo/?uid='+this.uid+'&jwt='+localStorage.getItem('jwt')).then(res=>{
                console.log(res)
                let img = res.data.img;
                let vedio = res.data.vedio;
                if (img.startsWith(localStorage.getItem('username'))) {
                    this.user.src = 'http://127.0.0.1:8000/static/upload/' + img
                }else {
                    this.user.src = config['qiniu'] + img
                }
                if(vedio != null) {
                    this.user.vedio = config['qiniu'] + vedio;
                    this.vshow = 1
                }
            })
        }
    },
    //注册组件标签
    components:{
        'myheader':myheader,
        'myfooter':myfooter,
        'dragVrify':dragVerify,
    },
    mounted(){
        this.get_uotoken();
        this.get_image();
        this.uidflow();
    }
}
</script>
